<template>
  <div class="register-frame">
    <section class="register-cont">
      <h1>财务管理系统</h1>
      <el-form :model="registerRule" :rules="rules" status-icon ref="registerForm" label-width="80px" 
      class="register-ruleForm">
        <el-form-item label="用户名" prop="userName">
          <el-input type="text" placeholder="请输入用户名" v-model="registerRule.userName"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input type="text" placeholder="请输入邮箱" v-model="registerRule.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
          <el-input type="password" placeholder="请输入密码" v-model="registerRule.passWord"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="passWord2">
          <el-input type="password" placeholder="请再输入一次密码" v-model="registerRule.passWord2"></el-input>
        </el-form-item>
        <el-form-item label="身份选择" prop="identity" placeholder="请选择">
          <el-select v-model="registerRule.identity">
            <el-option
              label="员工"
              value="staff">
            </el-option>
            <el-option
              label="管理员"
              value="manager">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="btn-frame">
          <el-button type="primary"
          class="register-btn"
          @click="submitForm('registerForm')">注册</el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script>
export default {
  name:"Register",
  data() {
      // var nameVali = (rule, value, callback)=>{
      //   if(value==""){
      //     return callback(new Error("不能为空"));
      //   }else{
      //     return callback();
      //   }
      // }
      var password2Vali= (rule,value,callback)=>{
        if(value != this.registerRule.passWord){
          return callback(new Error("两次输入密码不一样"));
        }else{
          return callback();
        }
      }
      return {
        registerRule: {
          userName:"",
          email:"",
          passWord:"",
          passWord2:"",
          identity:""
        },
        rules: {
          userName:[
            {required:true,message:"请输入用户名",trigger:'blur'},
            {min:3,max:30,message:"长度在3到30个字符之间",trigger:'blur'}
            // {validator:nameVali,trigger:'blur'} 定义验证方法
          ],
          email:[
            {
              type:"email",
              required:true,
              message:"请输入正确的邮箱格式"
            }
          ],
          passWord:[
            {required:true,message:"密码不能为空",trigger:'blur'},
            {min:3,max:30,message:"长度在3到30个字符之间",trigger:'blur'}
          ],
          passWord2:[
            {required:true,message:"密码不能为空",trigger:'blur'},
            {min:3,max:30,message:"长度在3到30个字符之间",trigger:'blur'},
            {validator:password2Vali,trigger:'blur'}
          ],
          identity:[{required:true,message:"请选择角色",trigger:'change'}]
        }
      };
    },
    methods: {
      submitForm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post("/api/user/register",this.registerRule).then((res)=>{
                this.$message({
                message: '注册成功',
                type: 'success'
              });
              this.$router.push({path:"/login"})
            })
          
            
          } else {
            this.$message.error('验证失败！！');
            return false;
          }
        });
      }
    }
}
</script>

<style scoped>
.register-frame{
  height: 100%;
  width: 100%;
  background: url("../assets/bg.jpg") center no-repeat;
  background-size: 100%;
  padding-top: 2rem;
  box-sizing: border-box;
}
.register-cont{
  margin:0 auto;
  width: 8rem;
}
.btn-frame{
  text-align: center;
}
.register-cont h1{
  margin-bottom: 0.2rem;
  font-size: 0.7rem;
  color: #fff;
  font-weight: 600;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
}
.register-ruleForm{
  background: #fff;
  margin: 0 auto;
  padding: 0.8rem 0.8rem  0.8rem 0.2rem;
  border: 0.02rem solid #ccc;
  border-radius: 0.2rem;
  box-shadow: 0rem 0 0.8rem #ccc;
}
.register-btn{
  text-align: center;
  width: 100%;
}
</style>
